<template>
  <div>
      <!--开始页面-->
      <el-row v-show="!isStart">
        <el-col span=1 offset="3">
          <div>
            <pre>
              <h1 style="font-size:25px">心理健康评估</h1>
              <span style="font-size:18px">

  心理健康是指心理的各个方面及活动过程处于一种良好或正常的状态。
  心理健康的理想状态是保持性格完好、智力正常、认知正确、情感适当、
  意志合理、态度积极、行为恰当、适应良好的状态。
  受到遗传和环境的双重影响，尤其是幼年时期的原生家庭的教养方式，
  对心理健康的发展影响甚大。心理健康突出在社交、生产、生活上能与
  其他人保持较好的沟通或配合，能良好地处理生活中发生的各种情况。

              </span><br>
              <el-button v-show="!ifWrite" @click='isStart=true' type="primary" plain style="width:300px;height:50px">我准备好了 开始吧</el-button>
              <span v-show="ifWrite" style="font-size:30px;color:green;">你已完成问卷 请耐心等待结果</span>
            </pre>
          </div>
        </el-col>
      </el-row>

      <div v-show="isStart">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit"></i> 强迫症化</span>
            <el-form>
              <div class="questionDiv" v-for="(item) in questions1" :key="item.id">
                  <!--<p>{{item.question}}</p>-->
                  <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                    <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
                  </el-radio-group>-->
                  <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                      <el-radio-group v-model="item.selectOption">
                        <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                    <el-checkbox-group v-model="item.checkOptions">
                      <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  
              </div><!--{{questions}}-->
              
            </el-form>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit"></i> 焦虑化</span>
            <el-form>
              <div class="questionDiv" v-for="(item) in questions2" :key="item.id">
                  <!--<p>{{item.question}}</p>-->
                  <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                    <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
                  </el-radio-group>-->
                  <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                      <el-radio-group v-model="item.selectOption">
                        <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                    <el-checkbox-group v-model="item.checkOptions">
                      <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  
              </div><!--{{questions}}-->
             
            </el-form>
          </el-tab-pane>
          <el-tab-pane>
              <span slot="label"><i class="el-icon-edit"></i> 恐怖化</span>
              <el-form>
                <div class="questionDiv" v-for="(item) in questions3" :key="item.id">
                    <!--<p>{{item.question}}</p>-->
                    <!--<el-radio-group v-model="isStart" v-show="item.isRadio==0" prop="question">
                      <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.options" :key="value.id"></el-radio>
                    </el-radio-group>-->
                    <el-form-item :label="item.question" prop="selectOption" v-show="item.isRadio==0">
                        <el-radio-group v-model="item.selectOption">
                          <el-radio border v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="item.question" prop="checkOptions" v-show="item.isRadio==1">
                      <el-checkbox-group v-model="item.checkOptions">
                        <el-checkbox border  v-for="value in item.tAssessQuestionOptionList" :label="value.id" :value="value.id" :key="value.id">{{value.options}}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    
                </div><!--{{questions}}-->
               <el-form-item>
                <el-button type="primary" @click="submitForm()">提交问卷</el-button>
              </el-form-item>
              </el-form>
            </el-tab-pane>
         
        </el-tabs>
        
      </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
        data() {
          return {
            isStart:false,
            questions1:[],
            questions2:[],
            questions3:[],
            questionTotal:[],
            ifWrite:false
          }
        }
        ,
  methods:{
      initQuestion(){
        axios.get("/tAssessQuestion/queryQPZQuestion").then((response)=>{
            this.questions1=response.data;
            for(var i=0;i<this.questions1.length;i++){
                if(this.questions1[i].isRadio==1){
                      this.$set(this.questions1[i],'checkOptions', []); //起作用
                }
            }
            this.questionTotal.push(this.questions1);
        }),
        axios.get("/tAssessQuestion/queryJLQuestion").then((response)=>{
            this.questions2=response.data;
            for(var i=0;i<this.questions2.length;i++){
                if(this.questions2[i].isRadio==1){
                      this.$set(this.questions2[i],'checkOptions', []); //起作用
                }
            }
            this.questionTotal.push(this.questions2);

        })
        ,
        axios.get("/tAssessQuestion/queryKBQuestion").then((response)=>{
            this.questions3=response.data;
            for(var i=0;i<this.questions3.length;i++){
                if(this.questions3[i].isRadio==1){
                      this.$set(this.questions3[i],'checkOptions', []); //起作用
                }
            }
            this.questionTotal.push(this.questions3);

        })
        
      },
      queryUserIfWrite(){
          axios.post("/tMentalityResult/queryUserIfWritreMentalityAnswer").then((response)=>{
            //表示填写过问卷
            if(response.data==true){
                this.ifWrite=true;
            }else{
                this.ifWrite=false;
            }
          })
      },
      submitForm() {
        //向后台发送选中的数据
        //alert(this.questionTotal);
        axios.post("/tMentalityResult/addTMentalityResult",this.questionTotal).then(()=>{
            this.$message({
              message: '评估成功，请耐心等待结果',
              type: 'success'
            });
                       this.$router.push("/assess");
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  mounted(){
      this.queryUserIfWrite();
      this.initQuestion();

  }
}
</script>

<style>

</style>